import React from 'react'
import { Menu, Dropdown } from 'antd'
import propTypes from 'prop-types'
import styles from './index.less'

/**
 * 控制表格的操作栏元素展示数量，可根据需要配置展示个数，修复之前版本只传入一个子元素会报错的bug
 * @param props {Object} children: {ReactNode}  size {Number} :设置需要展示元素的数量，默认值为 3
 * */

const ProTableOptions = (props) => {
  const { children, size } = props

  if (!children) return null

  // 过滤掉为null的操作栏, children 如果只传入一个元素，其类型为object
  const filterChildren = children?.length
    ? children?.filter((item) => item !== null && item !== undefined)
    : children

  return (
    <div className={styles.pro_table_options}>
      {filterChildren?.length > size ? (
        <>
          {filterChildren?.slice(0, size)}
          <Dropdown
            overlayClassName={styles.dropdown_sty}
            overlay={
              <Menu>
                {filterChildren?.slice(size)?.map((item, index) => (
                  <Menu.Item key={item.key || index}>{item}</Menu.Item>
                ))}
              </Menu>
            }
          >
            <span className={styles.more_btn}>
              <i className="iconfont icon-more" />
            </span>
          </Dropdown>
        </>
      ) : (
        children
      )}
    </div>
  )
}

ProTableOptions.defaultProps = {
  size: 3,
}

ProTableOptions.propTypes = {
  size: propTypes.number,
}

export default ProTableOptions
